<!DOCTYPE html>
<html>
<head>
  <title>选项卡</title>
  <style>
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
    }

    .tab button:hover {
      background-color: #ddd;
    }

    .tab button.active {
      background-color: #ccc;
    }

    .tabcontent {
      display: none;
      padding: 20px;
      border-top: none;
    }
  </style>
</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')">商品介绍</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">规格与包装</button>
</div>

<div id="Tab1" class="tabcontent">
  <h3>商品介绍</h3>
  <p>商品介绍的内容。</p>
</div>

<div id="Tab2" class="tabcontent">
  <h3>规格与包装</h3>
  <p>规格与包装内容。</p>
</div>

<script>
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }

  // 默认打开第一个选项卡
  document.getElementsByClassName("tablinks")[0].click();
</script>

</body>
</html>
